﻿<template>
  <div v-if="config.other.dataSource && config.other.dataSource.MetaSettings">
    <el-switch
      style="display: block"
      v-model="inc_fc"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="含默认栏位"
      inactive-text="不含默认栏位"
      @change="changeInc">
    </el-switch>
    <br>
    <el-select v-model="config.other.dataSource.MetaSettings.table" filterable  placeholder="请选择" @change="changeMeta">
      <el-option
        v-for="(item,index) in metatables"
        :key="index"
        :label="item.metadesc"
        :value="item.metauid">
        <span style="float: left">{{ item.metadesc }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
      </el-option>
    </el-select>
    <el-divider></el-divider>
    <el-form-item label = "过滤设定">
      <label class="tips">提示:值设定请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“事件词典表”</label>
      <div>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addFilter">添加</el-button>
        <div>
          <el-table :data = 'config.other.dataSource.MetaSettings.filterList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '栏位'>
              <template slot-scope = "scope">
                <el-select v-model="scope.row.column" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in metaColumns"
                    :key="index"
                    :label="item.column_desc"
                    :value="item.column_name">
                    <span style="float: left">{{ item.column_desc }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'sort' label = '条件'>
              <template slot-scope="scope">
                <el-select v-model="scope.row.condition" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in conditionOps"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'settings' label = '值设定'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleFilterRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form-item>
    <el-form-item label = "固定条件">
      <label class="tips">提示:值设定请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“事件词典表”</label>
      <div>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedFilter">添加</el-button>
        <div>
          <el-table :data = 'config.other.dataSource.MetaSettings.fixedFilter' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '栏位'>
              <template slot-scope = "scope">
                <el-select v-model="scope.row.column" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in metaColumns"
                    :key="index"
                    :label="item.column_desc"
                    :value="item.column_name">
                    <span style="float: left">{{ item.column_desc }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'sort' label = '条件'>
              <template slot-scope="scope">
                <el-select v-model="scope.row.condition" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in conditionOps"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'settings' label = '值设定'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleFixedFilterRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form-item>
    <el-form-item label = "排序设定">
      <el-button style="float: right; padding: 3px 0" type="text" @click="addOrderBy">添加</el-button>
        <div>
          <el-table :data = 'config.other.dataSource.MetaSettings.orderList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '栏位'>
              <template slot-scope = "scope">
                <el-select v-model="scope.row.column" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in metaColumns"
                    :key="index"
                    :label="item.column_desc"
                    :value="item.column_name">
                    <span style="float: left">{{ item.column_desc }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'sort' label = '排序'>
              <template slot-scope="scope">
                <el-select v-model="scope.row.direction" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in orderOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOrderRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    </el-form-item>
    <slot>
    </slot>
  </div>
</template>
<script>
import { deepCopy } from '../commonUse'
export default {
  props: ['config'],
  data () {
    return {
      inc_fc: false,
      metatables: [],
      metaColumns: [],
      conditionOps: [{
        label: '等于',
        value: '$eq'
      }, {
        label: '大于',
        value: '$gt'
      }, {
        label: '大于等于',
        value: '$gte'
      }, {
        label: '小于',
        value: '$lt'
      }, {
        label: '小于等于',
        value: '$lte'
      }, {
        label: '模糊比对',
        value: '$like'
      }, {
        label: 'in',
        value: '$in'
      }],
      orderOptions: [{
        label: '升序',
        value: 'asc'
      }, {
        label: '降序',
        value: 'desc'
      }]
    }
  },
  mounted () {
    if (!this.config.other.dataSource) {
      this.$set(this.config.other, 'dataSource', {
        MetaSettings: {
          table: '',
          filterList: [],
          orderList: [],
          fixedFilter: []
        }
      })
    }
    if (!this.config.other.dataSource.MetaSettings) {
      this.$set(this.config.other.dataSource, 'MetaSettings', {
        table: '',
        filterList: [],
        orderList: [],
        fixedFilter: []
      })
    }
    if (!this.metatables || this.metatables.length <= 0) {
      this.changeInc()
    }
  },
  methods: {
    changeInc () {
      if (this.inc_fc) {
        this.metatables = this.$store.state.commonData.metaList_inc_fc
      } else {
        this.metatables = this.$store.state.commonData.metaList
      }
      this.metaColumns = []
      let self = this
      var item = this.metatables.find(v => {
        return v.metauid === self.config.other.dataSource.MetaSettings.table
      })
      if (item) {
        this.metaColumns = item.columns
      }
    },
    changeMeta () {
      this.metaColumns = []
      this.config.other.dataSource.MetaSettings.valueKey = ''
      this.config.other.dataSource.MetaSettings.labelKey = ''
      let self = this
      var item = this.metatables.find(v => {
        return v.metauid === self.config.other.dataSource.MetaSettings.table
      })
      if (item) {
        this.metaColumns = item.columns
        this.$emit('metaChanged', deepCopy(item), deepCopy(this.metatables))
      }
    },
    addFilter () {
      this.config.other.dataSource.MetaSettings.filterList.push({
        column: '',
        condition: '',
        value: ''
      })
    },
    addOrderBy () {
      this.config.other.dataSource.MetaSettings.orderList.push({
        column: '',
        direction: 'asc'
      })
    },
    handleFilterRemove (index) {
      this.config.other.dataSource.MetaSettings.filterList.splice(index, 1)
    },
    handleOrderRemove (index) {
      this.config.other.dataSource.MetaSettings.orderList.splice(index, 1)
    },
    addFixedFilter () {
      this.config.other.dataSource.MetaSettings.fixedFilter.push({
        column: '',
        condition: '',
        value: ''
      })
    },
    handleFixedFilterRemove (index) {
      this.config.other.dataSource.MetaSettings.fixedFilter.splice(index, 1)
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
</style>
